<template>
  <div class="dashboard">
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon user-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="stat-info">
          <h3>{{ stats.totalUsers }}</h3>
          <p>总用户数</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon consultation-icon">
          <el-icon><FirstAidKit /></el-icon>
        </div>
        <div class="stat-info">
          <h3>{{ stats.totalConsultations }}</h3>
          <p>总咨询数</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon order-icon">
          <el-icon><Money /></el-icon>
        </div>
        <div class="stat-info">
          <h3>{{ stats.totalOrders }}</h3>
          <p>总订单数</p>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon revenue-icon">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="stat-info">
          <h3>¥{{ stats.totalRevenue }}</h3>
          <p>总收入</p>
        </div>
      </div>
    </div>
    
    <div class="charts-section">
      <div class="chart-card">
        <h4>用户增长趋势</h4>
        <div class="chart-placeholder">
          <p>图表区域 - 可集成 ECharts 或其他图表库</p>
        </div>
      </div>
      
      <div class="chart-card">
        <h4>收入统计</h4>
        <div class="chart-placeholder">
          <p>图表区域 - 可集成 ECharts 或其他图表库</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { User, FirstAidKit, Money, TrendCharts } from '@element-plus/icons-vue'

// 统计数据
const stats = reactive({
  totalUsers: 1234,
  totalConsultations: 5678,
  totalOrders: 890,
  totalRevenue: 123456
})

// 获取统计数据
const fetchStats = async () => {
  try {
    // 这里可以调用API获取真实数据
    // const response = await api.getStats()
    // Object.assign(stats, response.data)
    
    // 模拟数据更新
    console.log('仪表盘数据已加载')
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchStats()
})
</script>

<style lang="less" scoped>
// 仪表盘样式
.dashboard {
  .stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }
  
  .stat-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      
      :deep(.el-icon) {
        font-size: 24px;
        color: white;
      }
      
      &.user-icon {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      
      &.consultation-icon {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }
      
      &.order-icon {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
      
      &.revenue-icon {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
    }
    
    .stat-info {
      h3 {
        margin: 0 0 8px 0;
        font-size: 28px;
        font-weight: 600;
        color: #2c3e50;
      }
      
      p {
        margin: 0;
        color: #7f8c8d;
        font-size: 14px;
      }
    }
  }
  
  .charts-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
  }
  
  .chart-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    h4 {
      margin: 0 0 20px 0;
      color: #2c3e50;
      font-size: 16px;
      font-weight: 600;
    }
    
    .chart-placeholder {
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8f9fa;
      border-radius: 6px;
      color: #6c757d;
    }
  }
}

// 移动端适配
@media (max-width: 768px) {
  .dashboard {
    .stats-cards {
      grid-template-columns: 1fr !important;
    }
    
    .charts-section {
      grid-template-columns: 1fr !important;
    }
  }
}
</style>
